<template>
  <div class="w-full">
    <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="form" layout="inline">
        <a-form-item label="调机单号" prop="transferOrder">
          <a-input
            allow-clear
            :style="{ width: '180px' }"
            class="bacClass"
            v-model="form.adjustmentCode"
          />
        </a-form-item>
        <a-form-item label="坯布编号" prop="greyCode">
          <a-input
            allow-clear
            :style="{ width: '180px' }"
            class="bacClass"
            v-model="form.greyCode"
          />
        </a-form-item>
        <a-form-item label="坯布名称" prop="grayName">
          <a-input
            allow-clear
            :style="{ width: '180px' }"
            class="bacClass"
            v-model="form.grayName"
          />
        </a-form-item>
        <a-form-item label="织布单号" prop="planOrderCode">
          <a-input
            allow-clear
            :style="{ width: '180px' }"
            class="bacClass"
            v-model="form.planOrderCode"
          />
        </a-form-item>
        <a-form-item label="生产单号" prop="weaveCode">
          <a-input
            allow-clear
            :style="{ width: '180px' }"
            class="bacClass"
            v-model="form.weaveCode"
          />
        </a-form-item>
        <a-form-item label-col-flex="65px" label="楼层" prop="storey" :style="{ width: '262px' }">
          <a-input allow-clear class="bacClass" v-model="form.storey" />
        </a-form-item>
        <a-form-item label="开始日期" prop="startTime">
          <a-date-picker
            popup-container="html"
            v-model="form.startTime"
            :style="{ width: '180px' }"
            placeholder="选择开始日期"
            class="bacClass"
          />
        </a-form-item>
        <a-form-item label="结束日期" prop="endTime">
          <a-date-picker
            popup-container="html"
            v-model="form.endTime"
            :style="{ width: '180px' }"
            placeholder="选择结束日期"
            class="bacClass"
          />
        </a-form-item>
      </a-form>
    </div>
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>
    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div class="my-tool-bar" style="margin-bottom: 5px">
      <a-space>
        <el-button type="primary" :icon="Search" @click="selectList">查询</el-button>
      </a-space>
    </div>
    <div ref="tableRef">
      <AgGridVuesCopys
        class="ag-theme-alpine"
        :style="{ height: tableHeight + 'px' }"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        :defaultColDef="defaultColDef"
        :rowData="rowData"
        :columnDefs="columnDefs"
        :localeText="localeText1"
      >
      </AgGridVuesCopys>
      <paginationCopys
        :total="pageConfig.total"
        :pageSize="pageConfig.size"
        show-total
        show-jumper
        show-page-size
        @change="pageChange"
        @page-size-change="pageSizeChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue'
  import { ref, reactive, onMounted, onActivated, onDeactivated, nextTick } from 'vue'
  import { post } from '@/api/http'
  import { Search, EditPen } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'
  import { useTableHeight } from '@/hooks/useTableHeight'
  import { localeText } from '@/api/aggridZw'
  const localeText1: any = ref(localeText)
  const tableRef = ref(null)
  const { tableHeight, setTableHeight, getTableHeight, removeResize } = useTableHeight(tableRef)
  const form = reactive({
    adjustmentCode: '', //调机单号
    greyCode: '', //坯布编号
    grayName: '', //坯布名称
    planOrderCode: '', //织布单号
    weaveCode: '', //生产单号
    storey: '', //楼层
    startTime: '', //开始日期
    endTime: '', //结束日期
  })
  const headerShow = ref<Boolean>(true)
  const rowData = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1,
  }
  const columnDefs = reactive([
    {
      headerName: '',
      checkboxSelection: true,
      headerCheckboxSelection: true,
      pinned: 'left',
      width: 50,
      lockPosition: 'left',
    },
    {
      headerName: '调机单号',
      field: 'adjustmentCode',
      width: 150,
    },
    {
      headerName: '机台号',
      field: 'machineCode',
      width: 150,
    },
    {
      headerName: '生产单号',
      field: 'weaveCode',
      width: 150,
    },
    {
      headerName: '织布单号',
      field: 'planOrderCode',
      width: 150,
    },
    {
      headerName: '坯布编号',
      field: 'greyCode',
      width: 150,
    },
    {
      headerName: '坯布名称',
      field: 'grayName',
      width: 150,
    },
    {
      headerName: '客户名称',
      field: 'customName',
      width: 150,
    },
    {
      headerName: '楼层',
      field: 'storey',
      width: 150,
    },
    {
      headerName: '备注',
      field: 'remark',
      width: 150,
    },
    {
      headerName: '日期',
      field: 'startTime',
      width: 150,
    },
    {
      headerName: '调机类型',
      field: 'maintainType',
      width: 150,
      pinned: 'right',
    },
    {
      headerName: '工艺复核',
      field: 'craftState',
      width: 150,
      pinned: 'right',
      valueGetter: (params: any) => {
        return params.data.craftState == 0 ? '' : params.data.craftState == 1 ? '通过' : '未通过'
      },
    },
    {
      headerName: '状态',
      field: 'adjustmentState',
      width: 150,
      pinned: 'right',
      valueGetter: (params: any) => {
        return params.data.adjustmentState === 0 ? '未派工' : '已派工'
      },
      cellRenderer: (params: any) => {
        return params.value === '未派工'
          ? `<span style="color: red">${params.value}</span>`
          : `<span style="color: green">${params.value}</span>`
      },
    },
  ])
  const pageConfig = reactive({
    page: 1,
    size: 10,
    total: 0,
  })
  const getList = async () => {
    const res = await post({
      url: 'planSingle/adjustment/getPageByBI',
      data: {
        page: pageConfig.page,
        size: pageConfig.size,
        adjustmentCode: form.adjustmentCode, //调机单号
        greyCode: form.greyCode, //坯布编号
        grayName: form.grayName, //坯布名称
        planOrderCode: form.planOrderCode, //织布单号
        weaveCode: form.weaveCode, //生产单号
        storey: form.storey, //楼层
        dateStart: form.startTime ? dayjs(form.startTime).format('YYYY-MM-DD') : '',
        dateEnd: form.endTime ? dayjs(form.endTime).format('YYYY-MM-DD') : '',
        dutyMonitorState: 0,
        auditState: 0,
        adjustmentState: 0,
      },
    })
    console.log(res)
    if (res.code === 200) {
      rowData.value = res.data.list
      pageConfig.total = res.data.total
      pageConfig.size = res.data.pageSize
      pageConfig.page = res.data.pageNum
    } else {
      Message.error(res.message)
    }
  }
  const selectList = async () => {
    const res = await post({
      url: 'planSingle/adjustment/getPageByBI',
      data: {
        page: 1,
        size: pageConfig.size,
        adjustmentCode: form.adjustmentCode, //调机单号
        greyCode: form.greyCode, //坯布编号
        grayName: form.grayName, //坯布名称
        planOrderCode: form.planOrderCode, //织布单号
        weaveCode: form.weaveCode, //生产单号
        storey: form.storey, //楼层
        dateStart: form.startTime ? dayjs(form.startTime).format('YYYY-MM-DD') : '',
        dateEnd: form.endTime ? dayjs(form.endTime).format('YYYY-MM-DD') : '',
        dutyMonitorState: 0,
        auditState: 0,
        adjustmentState: 0,
      },
    })
    console.log(res)
    if (res.code === 200) {
      rowData.value = res.data.list
      pageConfig.total = res.data.total
      pageConfig.size = res.data.pageSize
      pageConfig.page = res.data.pageNum
    } else {
      Message.error(res.message)
    }
  }
  //分页器页码变化时触发的函数
  const pageChange = (newPage) => {
    console.log(newPage)
    pageConfig.page = newPage
    getList()
  }
  //修改页面条数触发的函数
  const pageSizeChange = (pageSize) => {
    pageConfig.size = pageSize
    getList()
  }

  // const setHeight = () => {
  //   return (tableHeight.value =
  //     window.innerHeight - tableRef.value.getBoundingClientRect().top - 40)
  // }
  onActivated(() => {
    //一进来的时候 先设置好table的高度
    setTableHeight()
    getList()
    //当触发了resize事件时 重新设置table的高度
    getTableHeight()
  })
  onDeactivated(() => {
    //重置form表单数据
    form.adjustmentCode = ''
    form.greyCode = ''
    form.grayName = ''
    form.planOrderCode = ''
    form.weaveCode = ''
    form.storey = ''
    form.startTime = ''
    form.endTime = ''
    //卸载resize事件
    removeResize()
  })
</script>

<style lang="scss" scoped>
  .contioner {
    background: #fff;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
  .arco-pagination {
    display: flex;
    justify-content: center;
  }
</style>
